// 入口文件
// console.log('ok')

import Vue from 'vue';
// 导入 App 组件 (里面包含router-view的显示渲染区域)
import app from './App.vue'; 

// 1.1 导入路由的包
import VueRouter from 'vue-router';
// 1.2 安装路由模块
Vue.use(VueRouter);

/*** 
 * 安装vuex
*/
import Vuex from 'vuex';
Vue.use(Vuex);

/** 
 * 每次刚进入网页的时候，肯定会调用main.js文件，此时先调用localStorage.getItem('car')来获取本地存储中的购物车car数组信息，并把它放到我们的store中去
*/
var car = JSON.parse(localStorage.getItem('car') || '[]');

/** 
 * 2 每次进去页面先取出商品列表数据goodslist
*/
var goodslist = JSON.parse(localStorage.getItem('goodslist') || '[]');

var store  = new Vuex.Store({
    state:{
        // car: [] //购物车的商品信息用一个数组来存储，在car数组中，存储一些商品的对象，对象可以设计成如下的形式
                //  {id:商品的id, count: 要购买的数量, price:商品的单价, selected:true}
                
        car: car, //使用了本地存储中的购物车商品数据信息

        // 我们把GoodsList组件中的私有数据挂载到公共的数据上去，因为我们没有api，在后期调用数据的时候，无法调用每个私有组件的商品列表信息，所有只能把GoodsList组件的私有数据变成公共的，方便我们后期后去，这是一种模拟的做法。
        // dataInGoodsListVue: [] //在需要的组件上(GoodsList.vue)调用即可
        dataInGoodsListVue: goodslist //使用本地存储的数据
    },
    mutations:{
        addToCar(state,goodsinfo){
            //点击加入购物车，把商品信息保存到 store 中的 car 数组
            // 分析：
            // 1. 如果购物车中，之前就已经有这个对应的商品了，那么只需要更新数量
            // 2. 如果没有，则直接把商品数据push到car中去

            //假设在购物车中没有找到对应的商品
            var flag = false;
            state.car.some(item=>{
               if(item.id == goodsinfo.id){
                   item.count += parseInt(goodsinfo.count);
                   flag = true;
                   return true;
               } 
            })
            // 如果最终循环完毕，得到的flag还是false，则直接把goodsinfo push 到 car 中去就可以了
            if(!flag){
                state.car.push(goodsinfo);
            }

            // 当更新了car之后，把car数组存储到本地的 localStorage 中去，实现持久化存储
            // 键值对为字符串的形式存储
            localStorage.setItem('car',JSON.stringify(state.car));
        },


        // 获取dataInGoodsList中数据的方法，在需要的组件上(GoodsList.vue)调用即可 
        getDataInGoodsListVue(state){
            var originList = [
                {
                    src: '//g-search1.alicdn.com/img/bao/uploaded/i4/i2/2616970884/O1CN01vQJKnV1IOuf3NnNah_!!0-item_pic.jpg_250x250.jpg_.webp',
                    title: '【下单最高减500元】Apple/苹果 iPhone XR 全网通4G手机双卡双待 苹果iPhoneXR 苹果xr',
                    newPrice: 5488,
                    oldPrice: 6288,
                    leftNum: 45,
                },
                {
                    src: '//g-search2.alicdn.com/img/bao/uploaded/i4/i4/1714128138/O1CN01ZO6zKO29zFiq1Zf7w_!!0-item_pic.jpg_250x250.jpg_.webp',
                    title: '【旗舰新品 6期免息】Xiaomi/小米 Redmi K20 Pro 新品大屏三摄骁龙855手机9官方旗舰店正品note7红米k20pro',
                    newPrice: 2799,
                    oldPrice: 2999,
                    leftNum: 50,
                },
                {
                    src: '//g-search2.alicdn.com/img/bao/uploaded/i4/i1/1695308781/O1CN016EJo1O2EjkOM4Wsy9_!!0-item_pic.jpg_250x250.jpg_.webp',
                    title: '【7天内可发货】Meizu/魅族 16s旗舰新品4G智能全网通4800万OIS光学防抖骁龙855全面屏手机',
                    newPrice: 2699,
                    oldPrice: 3199,
                    leftNum: 20,
                },
                {
                    src: '//g-search1.alicdn.com/img/bao/uploaded/i4/i1/2432146763/O1CN01v0eCek1zpV8DbSYLQ_!!0-item_pic.jpg',
                    title: '【现货速发】一加7Pro手机全新正品OnePlus7pro 骁龙855 一加七 6t  1+7T 一加7手机官方旗舰店官网 一加7pro',
                    newPrice: 4099,
                    oldPrice: 4499,
                    leftNum: 45,
                }, 
                {
                    src: '//g-search1.alicdn.com/img/bao/uploaded/i4/i3/1714128138/O1CN011P30fh29zFisjpNro_!!0-item_pic.jpg_250x250.jpg_.webp',
                    title: '【赠无线车充/无线充电宝】Xiaomi/小米小米9骁龙855全面屏索尼4800万拍照游戏手机官方旗舰redmiK20',
                    newPrice: 2999,
                    oldPrice: 3299,
                    leftNum: 50,
                }, 
                {
                    src: '//g-search3.alicdn.com/img/bao/uploaded/i4/i2/2838892713/O1CN01cAP1Sd1Vub4CcUOWD_!!0-item_pic.jpg_250x250.jpg_.webp',
                    title: '【6.28小黑盒】【买赠好礼】Huawei/华为P30 Pro曲面屏超感光徕卡四摄变焦双景录像980智能手机p30pro',
                    newPrice: 5488,
                    oldPrice: 5888,
                    leftNum: 20,
                },
                
            ]; //商品的信息
            // state.dataInGoodsListVue = originList;

            //  重复添加3次，以此来获取更多数据多结果
            var newList = [];
            for(var i= 0;i<3;i++){
                for (var j = 0; j < originList.length; j++) {
                    newList.push(originList[j]);
                }
            }
            state.dataInGoodsListVue = newList;
            
            // 1.把商品列表数据进行持久化存储在本地localStorage中
            localStorage.setItem('goodslist',JSON.stringify(state.dataInGoodsListVue));
        },
        // 获取更多dataInGoodsList中数据的方法，在需要的组件上(GoodsList.vue)调用即可
        getMoreDataInGoodsListVue(state){
            for (var i = 0; i < 6; i++) {
                var newgetgoodslist = [];
                newgetgoodslist[i] = state.dataInGoodsListVue[i];
                state.dataInGoodsListVue.push(newgetgoodslist[i]);
            }
            // 1.把商品列表数据进行持久化存储在本地localStorage中
            localStorage.setItem('goodslist', JSON.stringify(state.dataInGoodsListVue));
        },

        updateGoodsInfo(state,goodsinfo){
            // 修改购物车中商品的数量值
            // 1. 先根据id值来找到car中的这个商品的信息
            console.log(goodsinfo); //打印查出来count值可能是一个字符串 {id: 1, count: "7"}
            console.log(goodsinfo.count);
            console.log(state.car);
            state.car.some(item=>{
                if (item.id == goodsinfo.id) {
                    item.count = parseInt(goodsinfo.count);
                    return true
                }
            })
            // 把更新好的信息重新存到state中的car中去
            localStorage.setItem('car',JSON.stringify(state.car));
        },

        removeFromCar(state,id){
            // 根据id，从store中将购物车列表中删除的那条数据删除
            state.car.some((item,i)=>{
                if(item.id == id){
                    state.car.splice(i,1);
                    return true;
                }
            })
            // 将删除完的购物车信息立即保存到本地存储中去
            localStorage.setItem('car',JSON.stringify(state.car));
        },

        updateGoodsSelected(state,info){
            state.car.some(item=>{
                if(item.id == info.id){
                    item.selected = info.selected;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car));
            console.log('我触发了')
        }
    },
    getters:{
        getAllCount:function (state) {
            var c = 0;//默认徽标的所有数量为0
            state.car.forEach(item=>{
                c += item.count; //循环把购物车所有商品的数量加在一起，得到商品的所有数量
            })
            return c; // 我们把返回的数据交给徽标所使用的页面去使用
        },

        getGoodsSelected(state){
            var o = {}
            state.car.forEach(item=>{
                o[item.id] = item.selected;
            })
            return o;
        },

        getGoodsCountAndAmount(state){
            var o = {
                count: 0, //勾选的数量
                amount: 0, //勾选商品的总价
            }
            state.car.forEach(item=>{
                if(item.selected){
                    o.count += item.count;
                    o.amount += item.price * item.count;
                }
            })
            return o;
        }
    }
})

// 导入时间处理工具包
import moment from 'moment';
// 定义全局的过滤器(这是一个格式化时间操作的过滤器)
Vue.filter('dataFormat',function (dataStr,pattern="YYYY-MM-DD HH:mm:ss") {
    return moment(dataStr).format(pattern);
})
// 1.3 导入自己的router.js模块(在App.vue的显示区域根据这个路由匹配规则来渲染对应的组件)
import router from './router.js';

// 2.1 导入vue.resource
import VueResource from 'vue-resource';
// 2.2 安装vue-resource
Vue.use(VueResource);

// 设置请求的跟路径(比如某一个网站的根域名)
// Vue.http.options.root = '/root';
// 全局设置post时候表单数据格式的组织形式 application/x-www-form-urlencoded
// Vue.http.options.emulateJSON = true;
// 按需导入Mint-UI中的组件
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui';
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// // 评论时所需要的按钮组件
// Vue.component(Button.name, Button);
// // 使用Lazy load组件
// Vue.use(Lazyload);

/** 
 * 在实现懒加载的功能的时候，并不能使用按需导入组件的方式，需要将组件全部导入，并且引入Mint-UI的样式库
*/
import MintUI from 'mint-ui';
Vue.use(MintUI);
import 'mint-ui/lib/style.css';

/** 
 * 安装我们的图片预览插件
*/
import VuePreview from "vue-preview";
Vue.use(VuePreview);

// 导入mui的样式
import "./lib/mui/css/mui.min.css";
import "./lib/mui/css/icons-extra.css"

var vm = new Vue({
    el:"#app",
    data:{

    },
    methods:{

    },
    render:c=>c(app), //把整个app(App.vue)渲染到el实例上去
    router: router, // 1.4 挂载路由对象到vm实例上去
    store: store, //将store实例挂载到vm实例上去
})